<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>千度云盘</title>
	<link rel="icon" href="/image/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="login-container" >
	<img src="image/background1.jpg" id="background">
	<div class="header">
		<img src="image/logo.png" alt="">
		<div class="header-right">
			<ul>
				<li><a href="#">严打违规盗版文件和侵权传播</a></li>
				<li><a href="#">官方微博</a></li>
				<li><a href="#">问题反馈</a></li>
				<li><a href="#">客服联系</a></li>
			</ul>
		</div>
	</div>
	<div class="middle">
		<div class="middle-login">
			<div class="lr">
				<input type="button" onclick="l()" value="登录" />
				<input type="button" onclick="r()" value="注册" />
			</div>
			<div class="login-register">
				<div class="login" style="display: block " id="login">
					<form method="post" id="login_fom">
						<input type="text" name="userName" id="login-username" placeholder="用户名"  required/>
						<input type="password" name="userPassword" id="login-password" placeholder="密码" id="password" required/>
						<input type="text" class="topAlign" id="verify" name="verify" placeholder="验证码" required>
						<canvas width="100" height="40" id="verifyCanvas"></canvas>
						<img id="code_img">
						<input type="button" value="登录" id="login-btn" onclick="login('login_fom')">
					</form>
					<p class="wj"><a href="/forgetPage.html">忘记密码？</a></p>
				</div>
				<div class="register" style="display: none " id="register">
					<div class="tips_text">
						<span class="tips-text1"  style="display: none">由6-15位的数字字母组合</span>
						<span class="tips-text2"  style="display: none">二次密码不正确</span>
						<span class="tips-text3"  style="display: none">邮箱格式错误</span>
					</div>
					<form method="post" id="register_fom"  >
						<input type="text" name="userName" placeholder="用户名" id="r_userName"/>
						<input type="password" name="userPassword" id="password1" placeholder="密码" reguler="^\w{6,15}$" value=""/>
						<input type="password" name="password2" id="password2" placeholder="重复密码" value=""/>
						<input type="text" name="userEmail" id="userEmail" placeholder="邮箱" reguler="^([a-zA-Z0-9]{3,11})+@([a-zA-Z0-9]{2,3})+\.([A-Za-z]{2,3})$" value=""/>
						<input type="text" name="verification" id="verification" placeholder="请输入验证码"/>
						<input type="hidden" id="timeText" value="60">
						<input type="button" name="send" id="send" value="发送验证码" /><!--onclick="send_verification('email')"-->
						<input type="button" value="注册" id="zc" onclick="register()"/>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<iframe src="footer.html" frameborder="0" scrolling="no" class="iframe"></iframe>
<script type="text/javascript">
var index = 1;
var background = document.getElementById("background");
var lg = document.getElementById("login");
var rg = document.getElementById("register");

function l() {
	rg.style.display = "none";
	lg.style.display = "block ";
}
function r() {
	lg.style.display = "none";
	rg.style.display = "block";
}
//点击按钮时图片跳转
function show(index) {
	background.src = ("image/background" + index + ".jpg");
}
//图片自动轮播
function add() {
	if (index == 3) {
		index = 1;
	} else {
		index++;
	}
	show(index);
}
//图片自动轮播延时
var time = setInterval("add()", 3000);
var time2 = setInterval("buttons()", 3000);
//鼠标在时暂停轮播
background.onmouseover = function() {
	clearInterval(time);
	clearInterval(time2);
};
//鼠标离开继续轮播
background.onmouseout = function() {
	time = setInterval("add()", 3000);
};
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script src="js/util.js"></script>
<script>
$('#verify').keypress(function(e) {
	if (e.keyCode == 13) {
		e.preventDefault();
		$('#login-btn').click();
	}
});

$(function(a) {
	$('#password1').on('input',
	function(e) { //密码格式是否正确
		var password1 = $(this).attr('reguler');
		var pw = new RegExp((password1));
		if (pw.test($(this).val())) {
			$('.tips-text1').hide();
		} else {
			$('.tips-text1').show();
		}

	});
	$('#password2').on('input',
	function(e) { //二次密码是否正确判断
		var password1 = $('#password1').val();
		var password2 = $('#password2').val();
		if (password1 == password2) {
			$('.tips-text2').hide();
		} else {
			$('.tips-text2').show();
		}

	});
	$('#email').on('input',
	function(e) { //验证邮箱格式是否正确
		var email = $(this).attr('reguler');
		var reg = new RegExp(email);
		if (reg.test($(this).val())) {
			$('.tips-text3').hide();
		} else {
			$('.tips-text3').show();
		}
	});
	$('#send').click(function() { //邮箱发送验证码
		var userEmail = $('#userEmail').val();
		$.ajax({
			url: '/pan/verification',
			// 提交到controller的url路径
			type: 'post',
			data: JSON.stringify({
				userEmail: $('#userEmail').val()
			}),
			// data为String类型，必须为 Key/Value 格式。dataType: "json",    // 服务器端返回的数据类型
			processData: false,
			// 告诉jQuery不要去处理发送的数据
			contentType: false,
			// 告诉jQuery不要去设置Content-Type请求头
			success: function(data) { //请求成功后的回调函数，其中的参数data为controller返回的map,也就是说,@ResponseBody将返回的map转化为JSON格式的数据，然后通过data这个参数取JSON数据中的值
				if (data.message == "fail") {
					layer.alert("该邮箱已被使用，请输入新的邮箱号");
					$('#userEmail').val("");
				} else if (data.message == "nullEmail") {
					layer.alert("没有该邮箱号");
					$('#userEmail').val("");
				} else if (data.message == "success") {
					layer.alert("发送成功，请输入验证码");
				}
				console.log(data);
			},
			error: function(err) {
				console.log(err);
			}
		});
	});
});

//登陆
function login(formId) {
	var login_username = $('#login-username').val();
	var login_password = $('#login-password').val();
	var verify = $('#verify').val();

	if (!login_username) {
		layer.alert('请输入用户名！',
		function(index) {
			layer.close(index);
			$('#login-username').focus();
		});
		return false;
	}

	if (!login_password) {
		layer.alert('请输入密码！',
		function(index) {
			layer.close(index);
			$('#login-password').focus();
		});
		return false;
	}

	if (!verify) {
		layer.alert('请输入验证码！',
		function(index) {
			layer.close(index);
			$('#verify').focus();
		});
		return false;
	}

	if (verify.toUpperCase() != window.verifyCode) {
		layer.alert('验证码错误！',
		function(index) {
			layer.close(index);
			$('#code_img').click();
			$('#verify').focus();
		});
		return false;
	}

	$('#code_img').click();

	var login_form = document.getElementById(formId);
	var loginData = new FormData(login_form);
	$.ajax({
		url: '/pan/logins',
		method: 'post',
		data: Array.from(loginData.entries()).map(p => p.join("=")).join("&"),
		dataType: "json",
		success: function(data) {
			if (data.message == "success") {
				//跳转到用户首页
				setCookie('userName', data.userName); //向cookie添加用户名
				setCookie('userId', data.userId); //向cookie添加用户ID
				setCookie('userPhoto', data.userPhoto || ''); //向cookie添加用户头像
				setCookie('userEmail', data.userEmail); ////向cookie添加用户Email
				window.location.href = 'home.html';
			} else if (data.message == "userName") {
				layer.alert("用户不存在");
				$('#verify').val("");
				$('#password').val("");
			} else if (data.message == "password") {
				layer.alert("密码错误");
				$('#verify').val("");
				$('#password').val("").focus();
			}
		},
		error: function(err) {
			console.log(err);
		}
	});
}

//注册
function register() {
	var register_form = document.getElementById("register_fom");
	var registerData = new FormData(register_form);
	$.ajax({
		url: '/pan/register',
		method: 'post',
		data: registerData,
		processData: false,
		// 告诉jQuery不要去处理发送的数据
		contentType: false,
		// 告诉jQuery不要去设置Content-Type请求头
		success: function(data) {
			if (data.message == "register_success") {
				var callback = function(index) {
					layer.close(index);
					window.location.href = 'index.html';
				}
				//跳转到系统首页
				var index = layer.confirm("注册成功请登陆",
				function() {
					callback(index);
				},
				function() {
					callback(index);
				});
			} else if (data.message == "register_exist") {
				layer.alert('用户名已被使用');
				$('#r_userName').val("");
				$('#password1').val("");
				$('#password2').val("");
				$('#userEmail').val("");
				$('#verification').val("");
			} else if (data.message == "register_fail") {
				layer.alert('验证码错误');
				$('#verification').val("");
			} else if (data.message == "register_email_exist") {
				layer.alert('邮箱号已被注册，请使用正确的邮箱号');
				$('#userEmail').val("");
				$('#verification').val("");
			}
		},
		error: function(err) {
			console.log(err);
		}
	});
}

// 随机线
function drawline(canvas, context) {
	context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
	context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
	context.lineWidth = 0.5; //随机线宽
	context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
	context.stroke(); //描边，即起点描到终点
}
// 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
function drawDot(canvas, context) {
	var px = Math.floor(Math.random() * canvas.width);
	var py = Math.floor(Math.random() * canvas.height);
	context.moveTo(px, py);
	context.lineTo(px + 1, py + 1);
	context.lineWidth = 0.2;
	context.stroke();

}
// 绘制图片
function convertCanvasToImage(canvas) {
	document.getElementById("verifyCanvas").style.display = "none";
	var image = document.getElementById("code_img");
	image.src = canvas.toDataURL("image/png");
	return image;
}

// 绘制验证码
function drawCode() {
	var nums = ["2", "3", "4", "5", "6", "7", "8", "9", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
	var colors = [];
	var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
	var context = canvas.getContext("2d"); //获取画布2D上下文
	context.fillStyle = "cornflowerblue"; //画布填充色
	context.fillRect(0, 0, canvas.width, canvas.height);
	// 创建渐变
	var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
	gradient.addColorStop("0", "magenta");
	gradient.addColorStop("0.5", "blue");
	gradient.addColorStop("1.0", "red");
	//清空画布
	context.fillStyle = gradient; //设置字体颜色
	context.font = "25px Arial"; //设置字体
	var rand = new Array();
	var x = new Array();
	var y = new Array();
	for (var i = 0; i < 4; i++) {
		rand[i] = nums[Math.floor(Math.random() * nums.length)];
		x[i] = i * 16 + 10;
		y[i] = Math.random() * 20 + 20;
		context.fillText(rand[i], x[i], y[i]);
	}
	// console.log(rand);
	//画8条随机线
	for (var i = 0; i < 8; i++) {
		drawline(canvas, context);
	}
	// 画30个随机点
	for (var i = 0; i < 30; i++) {
		drawDot(canvas, context);
	}
	convertCanvasToImage(canvas);
	window.verifyCode = rand.join('').toUpperCase();
};

drawCode();

// 点击图片刷新
document.getElementById('code_img').onclick = function() {
	$('#verifyCanvas').remove();
	$('#verify').after('<canvas width="100" height="40" id="verifyCanvas" style="display:none"></canvas>');
	drawCode();
}
</script>
</body>
</html>